<template>
	<view class="container">
		<view class="content">
			<view class="search-top-wrapper">
				<view class="search-wrapper">
					<input class="uni-input" v-model="shopName" confirm-type="搜索" placeholder="查找商家:请输入商家名称"
						@confirm="handleSearch" />
					<view @click="handleSearch" class="iconBox">
						<image src="/static/search.png" class="icon" @click="handleSearch"></image>
					</view>

				</view>
			</view>
			<map class="map" :longitude="longitude" :show-location="true" :latitude="latitude" :markers="markers"
				@markertap="markertap" @tap="tap" id="mymap"></map>
		</view>
		<cover-view class="details-wrapper" v-if="details.id">
			<cover-view class="top-wrapper" @click.stop="store(details.id)">
				<cover-image :src="details.image" mode="aspectFill" class="img"></cover-image>
				<cover-view class="distance">{{details.distance || ''}}</cover-view>
				<cover-view class="text">
					<cover-view class="name ell">{{details.name}}</cover-view>
					<cover-view class="address ell">
						{{details.cityName || ''}}{{details.districtName || ''}}{{details.address || ''}}
					</cover-view>
					<cover-view class="time">营业时间：{{details.doBussinessTime || ''}}
						<cover-view class="status" v-if="details.status == 1">服务中</cover-view>
						<cover-view class="status" v-if="details.status == 2">闭店</cover-view>
					</cover-view>
				</cover-view>
				<cover-image src="/static/map_next.png" class="next"></cover-image>
			</cover-view>
			<cover-view class="line"></cover-view>
			<cover-view class="bottom-wrapper">
				<cover-view class="tel" @click.stop="handlePhoneCall">
					<cover-image src="/static/tel02.png" class="icon"></cover-image>
					<cover-view class="titl">{{details.phone || ''}}</cover-view>
				</cover-view>
				<cover-view class="openlocation-btn" @click.stop="handleOpenLocation">
					<cover-image src="/static/daohang.png" class="icon"></cover-image>
					<cover-view class="titl">导航</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
		<tabBar></tabBar>
<!-- 		<getPhones ref="getPhones"></getPhones>
 -->	</view>
</template>

<script>
	import getPhones from '@/components/getPhones/index.vue'
	import tabBar from '@/components/tab-bar/index.vue'
	import {
		selectShopDistance,
		shopDetail
	} from '@/api/store.js'
	export default {
		components: {
			tabBar,
			getPhones
		},
		data() {
			return {
				myMapContext: null,
				longitude: '',
				latitude: '',
				shopName: '',
				markers: [],
				details: {}
			}
		},
		onLoad() {},
		onShow() {
			this.getCurrentLocation()
			const token = uni.getStorageSync('token');
			// this.$nextTick(() => {
			// 	if (token) {
			// 		this.$refs.getPhones.show()
			// 	}
			// })
		},
		onReady() {
			// const myMapContext = uni.createMapContext('mymap', this)
		},
		methods: {
			handleSearch() {
				let that = this;
				let opt = {
					shopName: this.shopName,
					latitude: this.latitude,
					longitude: this.longitude,
					pageNum: 1,
					pageSize: 1000,
					type:1
				}
				// 附近商家
				selectShopDistance(opt).then(respanse => {
					that.storeList = respanse.result.rows

					console.log(that.convert2TecentMap(that.storeList[0].longitude, that.storeList[0].latitude))
					let jw = that.convert2TecentMap(that.storeList[0].longitude, that.storeList[0].latitude)
					that.latitude = jw.lat
					that.longitude = jw.lng
					that.markers = respanse.result.rows.map(e => {
						console.log(that.convert2TecentMap(e.longitude, e.latitude))
						let jw1 = that.convert2TecentMap(e.longitude, e.latitude)
						return {
							id: e.id,
							latitude: jw1.lat, // e.latitude,30.2384
							longitude: jw1.lng, //e.longitude,120.2484
							iconPath: '/static/map_store.png',
							width: 31,
							height: 35
						}
					})
				})
			},
			marsTobaidu(mars_point){
				var x_pi=3.14159265358979324 * 3000.0 / 180.0;
			    var baidu_point={longitude:0,latitude:0};
			    var x=mars_point.longitude;
			    var y=mars_point.latitude;
			    var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
			    var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
			    baidu_point.longitude = z * Math.cos(theta) + 0.0065;
			    baidu_point.latitude = z * Math.sin(theta) + 0.006;
			    return baidu_point;
			},
			getCurrentLocation() {
				const that = this
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						const {
							latitude,
							longitude
						} = that.marsTobaidu(res);
						that.latitude = latitude
						that.longitude = longitude
						console.log(latitude, longitude, 'xxx')
						const param = {
							latitude,
							longitude,
							pageNum: 1,
							pageSize: 50
						}
						// 附近商家
						selectShopDistance(param).then(respanse => {
							that.storeList = respanse.result.rows
							that.markers = respanse.result.rows.map(e => {
								console.log(that.convert2TecentMap(e.longitude, e.latitude))
								let jw = that.convert2TecentMap(e.longitude, e.latitude)
								return {
									id: e.id,
									latitude: jw.lat, // e.latitude,30.2384
									longitude: jw.lng, //e.longitude,120.2484
									iconPath: '/static/map_store.png',
									width: 31,
									height: 35
								}
							})
						})
					},
					fail: error => {
						console.log("获取定位失败了", error)
						uni.showModal({
							title: '提示',
							content: '获取定位失败，是否授权打开定位',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success(res) {
											console.log(res.authSetting)
										}
									})
								}
							}
						})
					}
				});
			},
			convert2TecentMap(lng, lat) {
				if (lng == '' && lat == '') {
					return {
						lng: '',
						lat: ''
					}
				}
				var x_pi = 3.14159265358979324 * 3000.0 / 180.0
				var x = lng - 0.0065
				var y = lat - 0.006
				var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
				var qqlng = z * Math.cos(theta)
				var qqlat = z * Math.sin(theta)
				return {
					lng: qqlng,
					lat: qqlat
				}
			},
			handlePhoneCall(phoneNumber) {
				const that = this
				uni.makePhoneCall({
					phoneNumber: that.details.phone
				})
			},

			// 导航
			handleOpenLocation() {
				const that = this
				const {
					latitude,
					longitude,
					name,
					cityName,
					districtName,
					address
				} = that.details
				console.log(latitude, longitude)
				uni.openLocation({
					latitude,
					longitude,
					name,
					address: cityName + districtName + address
				})
			},

			// 点击mark
			markertap(e) {
				this.details = {}
				const data = {
					shopId: e.detail.markerId,
					latitude: this.latitude,
					longitude: this.longitude
				}
				shopDetail(data).then(respanse => {
					this.details = respanse.result
					let jw = this.convert2TecentMap(this.details.longitude, this.details.latitude)
					this.details.longitude = jw.lng
					this.details.latitude = jw.lat
				}).catch(err => {})
			},

			// 点击地图其他地方
			tap() {
				console.log('tag')
				this.details = {}
			},

			store(id) {
				// &leftIcon=back
				uni.reLaunch({
					url: `/pages/store/index?shopId=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-top-wrapper {
		z-index: 2;
		padding: 21rpx 28rpx;
		background-color: #F5F5F5;

		.search-wrapper {
			position: relative;
			height: 63rpx;
			border-radius: 32rpx;

			.iconBox {
				position: absolute;
				right: 10rpx;
				width: 100rpx;
				top: 50%;
				transform: translateY(-50%);
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 111;

				.icon {

					width: 28rpx;
					height: 23rpx;
				}
			}


			.uni-input {
				display: block;
				padding-left: 20rpx;
				padding-right: 70rpx;
				width: 100%;
				height: 63rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				color: #333;
			}

			background-color: #fff;
		}
	}

	.map {
		width: 100%;
		height: calc(100vh - 102rpx);
	}

	.details-wrapper {
		position: fixed;
		left: 50%;
		bottom: 240rpx;
		z-index: 3;
		width: 700rpx;
		height: 312rpx;
		transform: translateX(-50%);
		background-color: #fff;
		border-radius: 8rpx;
	}

	.top-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		padding: 33rpx 30rpx 32rpx 35rpx;

		.distance {
			position: absolute;
			right: 30rpx;
			top: 43rpx;
			line-height: 32rpx;
			font-size: 22rpx;
			color: #999999;
		}

		.img {
			width: 132rpx;
			height: 132rpx;
			border-radius: 10rpx;
			background-color: #F5F5F5;
		}

		.text {
			flex: 1;
			padding-top: 3rpx;
			margin-left: 23rpx;
			overflow: hidden;

			.name {
				max-width: 85%;
				line-height: 42rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #060606;
			}

			.address {
				margin-top: 12rpx;
				line-height: 32rpx;
				font-size: 22rpx;
				color: #999999;
			}

			.time {
				margin-top: 10rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				color: #666666;

				.status {
					display: inline-block;
					vertical-align: top;
					margin-left: 23rpx;
					width: 84rpx;
					height: 35rpx;
					line-height: 35rpx;
					line-height: 35rpx;
					text-align: center;
					font-size: 18rpx;
					color: #ED602B;
					background: #FAE8E1;
					border-radius: 10rpx;
				}
			}
		}

		.next {
			width: 14rpx;
			height: 24rpx;
		}
	}

	.line {
		margin: 0 26rpx 0 34rpx;
		height: 1px;
		background-color: #EEEEEE;
	}

	.bottom-wrapper {
		display: flex;
		justify-content: space-between;
		padding: 23rpx 0 36rpx;
		margin: 0 26rpx 0 34rpx;

		.tel {
			display: flex;
			padding: 14rpx 0;

			.icon {
				width: 25rpx;
				height: 27rpx;
			}

			.titl {
				width: 180rpx;
				margin-left: 16rpx;
				line-height: 27rpx;
				font-size: 22rpx;
				color: #ED602B;
			}
		}

		.openlocation-btn {
			padding-top: 5rpx;
			width: 108rpx;
			height: 55rpx;
			box-sizing: border-box;
			text-align: center;
			background: #ED602B;
			border-radius: 10rpx;

			.icon {
				display: inline-block;
				vertical-align: 12rpx;
				width: 20rpx;
				height: 21rpx;
			}

			.titl {
				display: inline-block;
				vertical-align: middle;
				margin-left: 7rpx;
				line-height: 44rpx;
				font-size: 24rpx;
				color: #fff;
				white-space: nowrap;
			}
		}
	}
</style>
